
<template>	
	<view>
		<view class="sm">
			<view class="top">
				<image class="xh" :src="avatarUrl" @load="onoff='1'" style="width: 90rpx;height: 90rpx;border-radius: 50%;"></image>
				<view class="zy" v-text="associationDetail.name">校友会</view>
			</view>

			<view class="z">
				<view class="t">
					<image class="im" :src="bgImg" @load="onoff='1'" style="width: 100% ;height: 330rpx;"></image>
				</view>
			</view>

			<view class="x">
				<view class="jj" @click="tojianjie(associationDetail.id)">
					<image class="jianjie" src="../../static/images/synopsis.png"></image>
					<view class="wz">简介</view>
				</view>

				<view class="cyuan" @click="touser(associationDetail.id)">
					<image class="cy" src="../../static/images/chengyuan.png" style="width: 55rpx; height: 53rpx;"></image>
					<view class="cywz">成员</view>
				</view>

				<view class="zr">
					<navigator url="/pages/re_alumni/map1">
						<image class="zxy" src="../../static/images/faxian.png" style="width: 65rpx; height: 65rpx;"></image>
						<view class="zxywz">发现</view>
					</navigator>
				</view>

				<view class="own" @click="toPhoto(associationDetail.id)">
					<image class="wd" src="../../static/images/camera.png"></image>
					<view class="wdwz">相册</view>
				</view>
			</view>
		</view>

		<view class="zxzx" @click="toxinx(associationDetail.id)">
			<view class="hd">最新资讯</view>
			<view class="gdtb">
				<image class="gd" src="../../static/images/more1.png"></image>
			</view>
		</view>
		<view v-if="messageDetail.length >0">
			<view class="tex" v-for="detail in messageDetail" :key="detail.id" @click="todetail(detail.id)">
				<view class="tex1">{{detail.titleName.length>12 ? detail.titleName.substring(0,12)+'......' : detail.titleName}}</view>
				<view class="tex4" v-text="formatDate(detail.create_time)">2020/09/01</view>
			</view>
		</view>
		<view v-else class="t1">暂无校友会资讯，敬请期待!!!</view>
		<!-- <view class="zxhd" @click="toentity(item.userId)">
			<view class="hd">最新活动</view>
			<view class="gdtb">
				<image class="gd" src="../../static/images/gengduo.png"></image>
			</view>
		</view>
		<view v-if="activityList.length >0">
			<view class="table" v-for="entity in activityList" :key="entity.id" @click="toactivity(entity.id)">
				<image :src="srcXxh(entity.photo_path)" style="width: 200rpx; height: 140rpx;" />
				<view class="text">
					<view class="date">
						<view class="tex5">{{entity.name.length>4 ? entity.name.substring(0,4)+'......' : entity.name}}</view>
						<view class="tex7" v-text="formatDate1(entity.start_time)">>2020-06-06</view>
					</view>
					<view class="tex11">{{entity.content.length>22 ? entity.content.substring(0,22)+'......' : entity.content}}</view>
				</view>
			</view>
		</view>
		<view v-else class="t1">暂无校友会活动，敬请期待!!!</view> -->
		<button class="bon" @click="toJoin(associationDetail.id)">{{userInfoId>0?"申请退出":"申请加入"}}</button>
	</view>
</template>

<script>
	let app = getApp();
	import {
		mapState,
		mapMutations
	} from 'vuex'
	
	export default {
		data() {
			return {
				avatarUrl: app.globalData.Link + 'upload/图片/xiaohui.png',
				bgImg: app.globalData.Link + 'upload/图片/校友会.jpg',
				associationDetail: null, //某个校友会详情
				associationId: '', //校友会id
				briefId: '', //传到简介页面的校友会id
				joinId: '', //传到我的页面的用户id
				messageId: '', //传入信息页面的用户id
				entityId: '', //传入活动页面的id
				messageDetail: [], //校友会资讯
				detailId: '', //传入信息页面的校友会id
				activityList: '', //校友会活动
				activityId: '', //活动id
				userInfoId: 0 //是否加入校友会的标志
			}
		},
		computed:{
		   ...mapState(['userId', 'token', 'userName', 'wxNickName'])
		},
		//获取上一页面传的校友会id，查询校友会的信息
		async onLoad(option) {
			let that = this;
			let briefId = option.id;
			//进入详情页就查询详情信息
			uni.request({
					url: app.globalData.URL + 'association/queryAssociationById?id=' + briefId,
					method: 'GET'
				})
				.then(data => { //data为一个数组，数组第一项为错误信息，第二项为返回数据
					let [error, res] = data;
					console.log("queryAssociationById:");
					console.log(res.data);
					that.associationDetail = res.data;
					if (res.data.avatarUrl != null && res.data.avatarUrl != '') {
						that.avatarUrl = app.globalData.Link + 'upload/图片/' + res.data.avatarUrl;
					}
					if (res.data.bgImg != null && res.data.bgImg != '') {
						that.bgImg = app.globalData.Link + 'upload/图片/' + res.data.bgImg;
					}
					that.$isResolve()
				});
			that.queryNews(briefId);
			that.queryUserInfo(briefId);
			await that.$onLaunched; 
		},
		methods: {
			//查询最新校友会活动
			queryUserInfo(id) {
				var that = this;
				let params = {
					url: 'associationUserInfo/queryUserInfo',
					type: 'POST',
					data: {
						id: id,
						userId: that.userId
					},
					sCallback: function(res) {
						console.log("queryUserInfo", res);
						that.userInfoId = res.id;
					}
				}
				app.request(params);
			},
			//查询校友会资讯
			queryNews(id) {
				var that = this;
				uni.request({
					url: app.globalData.URL + 'news/newsAssociationLimit?page=0&size=1',
					data: {
						id: id,
					},
					header: {
						'content-type': 'application/json;charset=UTF-8' // 默认值
					},
					method: 'GET',
					success: (res) => {
						that.messageDetail = res.data;
						console.log(that.messageDetail);
					}
				})
			},
			//跳转到相册页面
			toPhoto(id) {
				uni.navigateTo({
					url: 'photo?id=' + id
				})					
			},
			//跳转到简介页面
			tojianjie(id) {
				uni.navigateTo({
					url: 'jianjie?id=' + id + '&avatarUrl=' + this.avatarUrl
				})
			},
			//跳转到成员页面
			touser(id) {
				uni.navigateTo({
					url: 'xyh?id=' + id
				})	
			},
			//跳转到信息页面
			toxinx(id) {
				uni.navigateTo({
					url: 'xinx?id=' + id
				})
					
			},
			//跳转到信息详情页面
			todetail(id) {
				uni.navigateTo({
					url: '../home/detail?id=' + id
				})
			},
			//跳转到活动详情页面
			toactivity(id) {
				uni.navigateTo({
					url: '../home/Edetail?id=' + id
				})
			},
			//跳转到活动页面
			toentity(id) {
				uni.navigateTo({
					url: '../home/entity?id=' + id
				})
			},
			toJoin(id){
				let that = this;
				if (that.userInfoId > 0){
					uni.showModal({
					    title: '提示',
					    content: '确定退出吗？',
					    success: function (res) {
					        if (res.confirm) {
								let params = {
									url: 'associationUserInfo/deleteUserInfo',
									type: 'POST',
									data: {
										id: that.userInfoId
									},
									sCallback: function(res) {
										that.userInfoId = 0;
										console.log("toDelete", res);
										uni.showToast({
											title: "成功退出该行会",
											icon: 'none',
											duration: 2000
										});
									}
								}
								app.request(params);				           
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
				}
				else{
					if (that.token.indexOf('Bearer')==-1){
						uni.showToast({
							title: "加入校友会需要实名认证哦！",
							icon: 'none',
							duration: 2000
						});
						return;
					}
					let params = {
						url: 'associationUserInfo/addUserInfo',
						type: 'POST',
						data: {
							associationId: id,
							userId: that.userId,
							name: that.userName,
							type: that.wxNickName
						},
						sCallback: function(res) {
							console.log("toJoin", res);
							that.userInfoId = res.id;
							if (that.userInfoId > 0){
								uni.showToast({
									title: "加入行会成功！",
									icon: 'none',
									duration: 2000
								});
							}
							// uni.redirectTo({
							// 	url:'../re_alumni/xyhxq?id=' + id
							// });
						}
					}
					app.request(params);
				}
				
			},
			//日期转换方法
			formatDate(value) {
				let date = new Date(value);
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				return y + '/' + MM + '/' + d;
			},
			//日期转换方法
			formatDate1(value) {
				let date = new Date(value);
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				return y + '-' + MM + '-' + d;
			},			
			//活动图片
			srcXxh: function(photo_path) {
				if (photo_path == null || photo_path == '') {
					return app.globalData.Link + 'file/activity/默认.jpg';
				} else {
					return app.globalData.Link + 'file/activity/' + photo_path;
				}
			
			},
		}
	}
</script>

<style>
	.date {
		display: flex;
	}

	.table {
		display: flex;
		margin: 20rpx 20rpx;
		height: 150rpx;
		border-bottom: 1px solid #BBBBBB;
	}

	.tex11 {
		font-size: 25rpx;
		color: #555555;
		margin-left: 30rpx;
		margin-top: 3rpx;
		text-indent: 2em;
	}

	.t1 {
		padding-bottom: 100rpx;
		margin-top: 100rpx;
		text-align: center;

	}

	.tex7 {
		font-size: 27rpx;
		color: #555555;
		margin-top: 22rpx;
	}

	.tex5 {
		font-size: 28rpx;
		color: #555555;
		margin-top: 20rpx;
		margin-left: 30rpx;
		width: 300rpx;
	}

	.tex {
		font-size: 28rpx;
		color: #007AFF;
		margin-top: 30rpx;
		margin-left: 10rpx;
		display: flex;
	}

	.tex4 {
		font-size: 28rpx;
		color: #007AFF;
		width: 30%;
		text-align : right;
		padding-right: 30rpx;
	}

	.tex1 {
		width: 70%;
		font-size: 25rpx;
		color: #255BBA;
		left: 0rpx;
		margin-top: 3rpx;
		text-indent: 2em;
	}

	.im {
		width: 100%;
		height: 300rpx;
		/* // margin-left: 10rpx; */
		margin-top: 20rpx;
	}

	.xh {
		text-indent: 1.5em;
		margin-top: 10rpx;
		margin-left: 10rpx;
	}

	.zy {
		text-indent: 0.5em;
		margin-left: 100rpx;
		font-size: 35rpx;
		margin-top: -72rpx;
		color: #333333;
	}

	.z {
		margin-top: 5rpx;
	}

	.image {
		margin-top: 90rpx;
		margin-left: 100rpx;
	}

	.ima {
		margin-top: 120rpx;
		margin-left: 10rpx;
	}

	.t {
		display: flex;
		margin: 0rpx 30rpx 30rpx 30rpx;
	}

	.jianjie {
		width: 80rpx;
		height: 80rpx;
	}

	.jj {
		text-align: center;
		margin-left: 60rpx;
	}

	.wz {
		font-size: 25rpx;
		margin-top: -10rpx;
	}

	.cyuan {
		text-align: center;
		margin-left: 115rpx;
	}

	.cy {
		margin-top: 18rpx;

	}

	.cywz {
		font-size: 25rpx;
		width: auto;
	}

	.zr {
		text-align: center;
		margin-left: 130rpx;
	}

	.zxy {
		margin-top: 5rpx;
	}

	.zxywz {
		font-size: 25rpx;
	}

	.own {
		text-align: center;
		margin-left: 130rpx;
	}

	.wd {
		width: 55rpx;
		height: 55rpx;
		margin-top: 15rpx;
	}

	.wdwz {
		font-size: 25rpx;
	}


	.x {
		display: flex;
		margin-top: 30rpx;

	}

	.sm {
		box-shadow: #F1F1F1 5rpx 8rpx 0rpx 5rpx;
		margin-top: 10rpx;
		height: 570rpx;
		/* width: 100%; */
	}

	.hd {
		margin-top: 45rpx;
		margin-left: 40rpx;
		font-size: 30rpx;
	}

	.gd {
		margin-top: -90rpx;
		margin-left: 680rpx;
		font-size: 30rpx;
		height: 32rpx;
		width: 35rpx;
	}

	.gdtb {
		margin-top: -40rpx;
	}

	.zxhd {
		box-shadow: #F1F1F1 2rpx 5rpx 0rpx 0rpx;
		margin-top: 4rpx;
		height: 60rpx;
	}

	.zxzx {
		box-shadow: #F1F1F1 5rpx 8rpx 0rpx 6rpx;
		margin-top: 5rpx;
		height: 60rpx;
	}

	.hdtp {
		width: 195rpx;
		height: 150rpx;
		margin-top: 35rpx;
		margin-left: 30rpx;
		border-radius: 10rpx;
	}

	.hdmz {
		font-size: 30rpx;
		margin-top: -150rpx;
		margin-left: 260rpx;
	}

	.hdsj {
		font-size: 25rpx;
		margin-top: 20rpx;
		margin-left: 260rpx;
	}

	.bgs {
		font-size: 24rpx;
		margin-top: 20rpx;
		margin-left: 260rpx;
		color: #999999;
	}

	.rs {
		font-size: 24rpx;
		margin-top: -30rpx;
		margin-left: 560rpx;
		color: #999999;
	}

	.xm {
		box-shadow: #F1F1F1 2rpx 5rpx 0rpx 0rpx;
		height: 210rpx;
	}
	
	.bon {
		margin-top: 50rpx;
		color: #FFFFFF;
		background-color: #007AFF;
	}
</style>
